<template>
  <div class="TopBarSwitch">
    <div class="img01"></div>
    <div class="img02"></div>
    <div class="img03"></div>

    <div class="barswitch">
      <div
        :class="['bar-item',item.isactive?'bar-item-active':'']"
        v-for="item in menu"
        :key="item.id"
        @click="selectBarName(item.label)"
      >{{item.label}}</div>
    </div>

    <!-- <div class="peronal">
      <el-image
        class="enterSystem"
        v-hasRole="['admin']"
        @click="enterSystemHandler"
        :src="require(`../../../assets/img/head/${isScreen ? '进入中台' : '进入前端'
        }.png`)
        "
        alt
      />
      <div class="user">{{ showUserName }}</div>
      <div class="logout" @click="logout">退出登录</div>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      statusSelectName: "预警一张图",
      menu: [
        { id: 0, label: "预警一张图", isactive: true },
        { id: 1, label: "火区数据管理", isactive: false },
        { id: 2, label: "矿山信息管理", isactive: false }
      ],
      isScreen: true
    };
  },
  computed: {
    showUserName() {
      return this.$store.state.user.name;
    }
  },
  methods: {
    selectBarName(barname) {
      this.statusSelectName = barname;
      this.menu.forEach(item => {
        if (barname === item.label) {
          item.isactive = true;
        } else {
          item.isactive = false;
        }
      });
      this.$emit("nowBarName", this.statusSelectName);
    },
    // 前端退出代码
    // async logout() {
    //   this.$confirm("确定注销并退出系统吗？", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(() => {
    //       this.$store.dispatch("LogOut").then(() => {
    //         location.href = "/";
    //       });
    //     })
    //     .catch(() => {});
    // },
    enterSystemHandler() {
      // 控制并切换图标显示
      this.isScreen = !this.isScreen;
      if (this.isScreen) {
        this.$router.push("/index");
        // this.$router.push(this.$route.path == "/houtai" ? "/home" : "/houtai");
      } else {
        this.$router.push("/houtai");
        // this.$router.push(this.$route.path == "/home" ? "/houtai" : "/home");
      }
      console.log("进入后端");
    }
  }
};
</script>

<style lang="scss" scoped>
.TopBarSwitch {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 72px;
  z-index: 9999;
  .img01 {
    width: 100%;
    height: 81px;
    background: url("../../../../src/assets/img/head/顶部导航.png") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }
  .img02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 628px;
    height: 166px;
    background: url("../../../../src/assets/img/head/名称点缀.png") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }
  .img03 {
    position: absolute;
    top: 18px;
    left: 10px;
    width: 507px;
    height: 40px;
    background: url("../../../../src/assets/img/head/新疆矿山安全监测管理系统.png")
      no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }
  .barswitch {
    position: absolute;
    left: 630px;
    top: 0px;
    width: 45%;
    line-height: 72px;
    text-align: center;
    display: flex;
    direction: row;
    justify-content: space-around;
    .bar-item {
      width: 230px;
      // 字体设置
      font-family: "AlibabaPuHuiTi-2-85-Bold";
      font-size: 25px;
      font-weight: normal;
      font-style: italic;
      font-stretch: normal;
      letter-spacing: 1px;
      color: #bbcde6;
      cursor: pointer;
      user-select: none;
    }
    .bar-item-active {
      margin-top: -5px;
      font-size: 30px;
      height: 66px;
      background: url("../../../../src/assets/img/head/选中切换.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .peronal {
    position: absolute;
    top: 8px;
    right: 30px;
    width: 18%;
    display: flex;
    justify-content: flex-end;
    height: 52px;

    .enterSystem {
      margin-right: 10px;
      cursor: pointer;
    }

    .user {
      display: flex;
      right: 60px;
      color: #bbcde6;
      margin-right: 10px;
      justify-content: center;
      align-items: center;
      font-size: 18px;
    }

    .logout {
      display: flex;
      right: 60px;
      color: #bbcde6;
      cursor: pointer;
      margin-right: 20px;
      justify-content: center;
      align-items: center;
      font-size: 18px;
    }
  }
}
</style>
